<template>
  <div class="upload-body">
    <el-dialog v-model="centerDialogVisible" title="投票" width="30%" center>
      <div class="vote-list">
        <div class="vote-item f-a-c" v-for="(item, index) in voteList" :key="index">
          <el-input
            v-model="item.value"
            :placeholder="'选项' + (index + 1)"
            :class="{ 'vote-not-default': !item.default }"
          ></el-input>
          <svg-icon
            v-if="!item.default"
            class="del-icon"
            name="icon-vote-shanchu"
            @click="voteDel(item, index)"
          ></svg-icon>
        </div>
      </div>
      <div class="add-vote" v-if="voteList.length < 5">
        <span @click="addVote">+添加选项</span>
      </div>

      <template #footer right>
        <span class="dialog-footer flex">
          <div class="close-btn f-j-a-c" @click="close">取消</div>
          <div class="confirm-btn f-j-a-c" @click="confirm">确定</div>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { toFixedNum } from "@/utils/common.js";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import {
  defineComponent,
  reactive,
  toRefs,
  onUnmounted,
  onMounted,
  computed,
  getCurrentInstance,
} from "vue";
import { ElMessage } from "element-plus";
export default defineComponent({
  props: {
    editVoteList: {
      type: Array,
      default: () => [],
    },
  },
  setup(props, { attrs, slots, emit }) {
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    const store = useStore();

    let voteDefaultList = [
      {
        value: "",
        default: true,
      },
      {
        value: "",
        default: true,
      },
    ]; //默认值

    let data = reactive({
      centerDialogVisible: false,
      voteList: JSON.parse(JSON.stringify(voteDefaultList)), //文件列表
    });

    // 添加选项
    let addVote = () => {
      if (data.voteList.length >= 5) return;
      data.voteList.push({
        value: "",
        default: false,
      });
    };

    // 投票删除
    let voteDel = (itme, index) => {
      data.voteList.splice(index, 1);
    };

    // 打开弹框
    let open = () => {
      if (props.editVoteList && props.editVoteList.length) {
        data.voteList = props.editVoteList.map((item, index) => {
          return {
            value: item.value,
            default: index <= 1,
          };
        });
      }
      data.centerDialogVisible = true;
    };

    // 取消
    let close = () => {
      data.voteList = JSON.parse(JSON.stringify(voteDefaultList));
      data.centerDialogVisible = false;
    };

    // 确定
    let confirm = () => {
      let filtersList = data.voteList.filter((item) => !item.value);
      if (filtersList.length) return ElMessage.warning("存在空白选项");
      let vote = data.voteList.map((item) => {
        return { value: item.value };
      });
      emit("confirm", vote);
      close();
    };

    return {
      addVote,
      voteDel,
      close,
      confirm,
      open,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.upload-body {
  :deep(.el-dialog.el-dialog--center) {
    border-radius: 20px;
    min-width: 520px;
    max-width: 600px;
  }

  :deep(.el-dialog--center .el-dialog__footer) {
    text-align: right !important;
  }
}

.vote-list {
  .vote-item {
    margin-bottom: 10px;
    position: relative;
    :deep(.el-input__wrapper) {
      background: #f5f6f7;
      border: none;
      height: 40px;
      border-radius: 10px;
      box-shadow: none;
    }
    :deep(.el-input__wrapper.is-focus) {
      box-shadow: 0 0 0 1px #64c8dc inset;
    }

    .del-icon {
      position: absolute;
      right: 10px;
      width: 24px;
      height: 24px;
      cursor: pointer;
      z-index: 90;
    }
  }
  .vote-not-default {
    :deep(.el-input__wrapper) {
      padding-right: 44px;
    }
  }
}

.add-vote {
  font-size: 14px;
  color: #64c8dc;
  cursor: pointer;
}

// 底部按钮
.dialog-footer {
  font-size: 14px;
  font-weight: bold;
  justify-content: flex-end;
  > div {
    height: 36px;
    width: 80px;
    border-radius: 10px;
    margin-left: 10px;
    cursor: pointer;
    background: #f3f4f5;
    color: #656f79;
    &:active {
      opacity: 0.7;
    }
  }
  .confirm-btn {
    background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
    color: #ffffff;
  }
}
</style>
